<template>
  <div class="social-signup-container">
    <div class="forget">
      <div class="zhengti">


        <div class="buzhou">
          <el-steps :active="active" finish-status="success">
            <el-step title="步骤 1"></el-step>
            <el-step title="步骤 2"></el-step>
            <el-step title="步骤 3"></el-step>
          </el-steps>
        </div>



        <transition name="el-fade-in-linear">
          <el-form :rules="rules"
                   v-loading="loading"
                   element-loading-text="正在验证..."
                   element-loading-spinner="el-icon-loading"
                   element-loading-background="rgba(0, 0, 0, 0.8)"
                   ref="form"
                   :model="LoginForm"
                   class="loginContainer1" v-show="show">
            <h3 class="loginTile1">忘记密码</h3>
            <el-form-item prop="username" style="background-color: #333744">
              <el-input  v-model="LoginForm.username" placeholder="请输入邮箱地址" type="text"></el-input>
            </el-form-item>
            <el-form-item prop="code" style="background-color: #333744">
              <el-input  v-model="LoginForm.code" placeholder="输入验证码" type="text" auto-complete="false" style="width: 250px;margin-right: 5px;color: #333744"></el-input>
            </el-form-item>
            <el-button :loading="loading" type="primary" style="width: 100%" @click="submitCode('form')">发送验证码</el-button>
            <br>
            <br>
            <el-button type="primary" style="width: 100%" @click="submitLogin('form')">下一步</el-button>
          </el-form>
        </transition>


        <transition name="el-fade-in-linear">
          <el-form :rules="rules"
                   v-loading="loading"
                   element-loading-text="正在验证..."
                   element-loading-spinner="el-icon-loading"
                   element-loading-background="rgba(0, 0, 0, 0.8)"
                   ref="form"
                   :model="test1"
                   class="loginContainer1" v-show="show1">
            <h3 class="loginTile1">修改密码</h3>
            <el-form-item prop="username" style="background-color: #333744">
              <span class="svg-container">
          <i class="el-icon-user"/>
        </span>
              <el-input v-model="test1.username" placeholder="请输入用户名" type="text"></el-input>
            </el-form-item>

            <el-form-item prop="password" style="background-color: #333744">
              <span class="svg-container">
            <i class="element-icons el-iconlock" />
          </span>
              <el-input v-model="test1.password" placeholder="请输入密码" type="password"></el-input>
            </el-form-item>

            <el-form-item style="background-color: #333744">
              <span class="svg-container">
            <i class="element-icons el-iconlock" />
          </span>
              <el-input v-model="passwordya" placeholder="请重新输入密码" type="password"></el-input>
            </el-form-item>
            <el-button type="primary" style="width: 100%" @click="submitLogin1('form')">下一步</el-button>
          </el-form>
        </transition>



        <transition name="el-fade-in-linear">
          <el-form :rules="rules1"
                   v-loading="loading"
                   element-loading-text="正在验证..."
                   element-loading-spinner="el-icon-loading"
                   element-loading-background="rgba(0, 0, 0, 0.8)"
                   ref="form"
                   :model="LoginForm1"
                   class="loginContainer1" v-show="show2">
            <h3 class="loginTile1">重新登录</h3>
            <el-form-item prop="username" style="background-color: #333744">
              <span class="svg-container">
            <i class="el-icon-user" />
          </span>
              <el-input v-model="LoginForm1.username" placeholder="请输入用户名" type="text"></el-input>
            </el-form-item>
            <el-form-item prop="password" style="background-color: #333744">
              <span class="svg-container">
            <i class="element-icons el-iconlock" />
          </span>
              <el-input v-model="LoginForm1.password" placeholder="请输入密码" type="password" auto-complete="false"></el-input>
            </el-form-item>
            <el-form-item prop="code" style="width: 330px;background-color: #333744">
              <el-input v-model="LoginForm1.code" placeholder="点击更换验证码" type="text" auto-complete="false" style="width: 250px;margin-right: 5px"></el-input>
            </el-form-item>
            <div style="width: 100px;float: left;padding-top: 5px;position: relative;margin-left: 350px;margin-top: -70px">
              <img :src="captchaUrl" @click="updateCaptcha" height="100%">
            </div>
            <el-button type="primary" style="width: 100%" @click="submitLogin2('form')">登录</el-button>
          </el-form>
        </transition>


      </div>
    </div>
  </div>
</template>

<script>
// import openWindow from '@/utils/open-window'

export default {
  name: 'SocialSignin',
  data(){
    return{
      //加time确保验证码可以刷新 不然可能只会返回一张验证码
      captchaUrl:'/api/login/captcha?time='+new Date(),
      LoginForm:{
        username:'',
        password:'admin',
        code:'',
      },
      LoginForm1:{
        username:'',
        password:'',
        code:'',
      },
      checked:true,
      rules:{
        username:[{required:true,message:'请输入用户名',trigger:'blur'}],
        password:[{required:true,message:'请输入密码',trigger:'blur'}],
        code:[{required:true,message:'请输入验证码',trigger:'blur'}]
      },
      rules1:{
        username:[{required:true,message:'请输入用户名',trigger:'blur'}],
        password:[{required:true,message:'请输入密码',trigger:'blur'}],
        code:[{required:true,message:'请输入验证码',trigger:'blur'}]
      },
      loading:false,
      urlparam:{
        loginName:'',
        code:''
      },
      show: false,
      show1: false,
      show2: false,
      active: 0,
      test1:{
        username:'',
        password:''
      },
      passwordya:''
    }
  },
  mounted(){
    this.showBuzhou()
  },
  methods: {
    wechatHandleClick(thirdpart) {
      alert('ok')
      // this.$store.commit('SET_AUTH_TYPE', thirdpart)
      // const appid = 'xxxxx'
      // const redirect_uri = encodeURIComponent('xxx/redirect?redirect=' + window.location.origin + '/auth-redirect')
      // const url = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + appid + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_login#wechat_redirect'
      // openWindow(url, thirdpart, 540, 540)
    },
    tencentHandleClick(thirdpart) {
      alert('ok')
      // this.$store.commit('SET_AUTH_TYPE', thirdpart)
      // const client_id = 'xxxxx'
      // const redirect_uri = encodeURIComponent('xxx/redirect?redirect=' + window.location.origin + '/auth-redirect')
      // const url = 'https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=' + client_id + '&redirect_uri=' + redirect_uri
      // openWindow(url, thirdpart, 540, 540)
    },
    submitLogin2(formName){
      this.urlparam.loginName=this.LoginForm1.username;
      this.urlparam.password=this.LoginForm1.password;
      this.urlparam.code=this.LoginForm1.code;
      this.$http({
        url:'/login/get',
        method:'get',
        params:this.urlparam
      }).then(result=>{
        if(result.data==1){
          this.$message({
            type:'success',
            message:'登录成功',
            showClose: true
          });
          window.sessionStorage.setItem("username",this.urlparam.loginName);
          this.$router.push("/homeTest")
        }else if(result.data==0){
          this.$message({
            type:'error',
            message:'密码错误或验证码错误',
            showClose: true
          })
        }else {
          this.$message({
            type:'error',
            message:'未知错误',
            showClose: true
          })
        }
        console.log(result);
      })
    },
    submitLogin1(formName){
      if(this.test1.password==this.passwordya){
        let val={
          login:'',
          password:''
        };
        val.login=this.test1.username;
        val.password=this.test1.password;
        this.$http({
          url:'/login/updatePassword',
          method: 'put',
          params:val
        }).then(result=>{
          if(result.data==200){
            this.$message({
              type:'success',
              message:'修改成功',
              showClose: true
            });
            this.show1=false;
            this.active=2;
            this.show2=true
            this.captchaUrl='/api/login/captcha?time='+new Date();
          }else {
            this.$message({
              type:'error',
              message:'修改失败',
              showClose: true
            });
          }
          console.log(result);
        })
      }else {
        this.$message({
          type:'error',
          message:'两次密码不一致',
          showClose: true
        })
      }
    },
    submitLogin(formName){
      let urlp={
        code:''
      };
      urlp.code=this.LoginForm.code;
      this.$http({
        url:'/login/getEmail',
        method:'get',
        params:urlp
      }).then(result=>{
        if(result.data=='ok'){
          this.$message({
            type:'success',
            message:'验证成功',
            showClose: true
          });
          this.show=false;
          this.show1=true;
          this.active=this.active+1;
        }else if(result.data=='no'){
          this.$message({
            type:'error',
            message:'邮箱或验证码错误',
            showClose: true
          })
        }else {
          this.$message({
            type:'error',
            message:'未知错误',
            showClose: true
          })
        }
        console.log(result);
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    updateCaptcha(){
      this.captchaUrl='/api/login/captcha?time='+new Date();
    },
    showBuzhou(){
      if(this.active==0){
        this.show=true;
      }
    },
    submitCode(){
      this.loading = true;
      console.log(1);
      let hello={
        email:''
      };
      hello.email=this.LoginForm.username;
      this.$http({
        url:'/login/sendemail',
        method:'get',
        params:hello
      }).then(result=>{
        console.log(result);
        this.loading=false;
        if(result.data=='ok'){
          this.$message({
            type:'success',
            message:'验证码发送成功',
            showClose: true
          });
        }else if(result.data=='no'){
          this.$message({
            type:'error',
            message:'不存在该用户',
            showClose: true
          });
        }else {
          this.$message({
            type:'error',
            message:'未知错误',
            showClose: true
          });
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .social-signup-container {
    margin: 20px 0;
    .sign-btn {
      display: inline-block;
      cursor: pointer;
    }
    .icon {
      color: #fff;
      font-size: 24px;
      margin-top: 8px;
    }
    .wx-svg-container,
    .qq-svg-container {
      display: inline-block;
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      padding-top: 1px;
      border-radius: 4px;
      margin-bottom: 20px;
      margin-right: 5px;
    }
    .wx-svg-container {
      background-color: #24da70;
    }
    .qq-svg-container {
      background-color: #6BA2D6;
      margin-left: 50px;
    }
  }
  .login-container .el-input input{
    color: #333744;
  }
</style>
